<template>
  <div class="add-btn-spec-value cursor">
    <a-popover trigger="click" v-model:popup-visible="PopupSpecValue" @popup-visible-change="popupChange($event, item)">
      <icon-plus-circle />
      <template #content>
        <div style="max-width: 400px">
          <a-checkbox v-for="item of curSpecInfo.valueList" :key="item.valueCn" v-model="item.checked">[{{ item.valueCode }}]{{ item.valueCn }}({{ item.valueEn }})</a-checkbox>
        </div>
        <div class="popup-footer">
          <a-button size="mini" class="gray-outline" @click="PopupSpecValue = false">取消</a-button>
          <a-button size="mini" class="ml10" type="primary" @click="submit">确认</a-button>
        </div>
      </template>
    </a-popover>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue'
  import { pageProductSpec } from '@/api/product'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['info'],
    setup(props: any, { emit }) {
      let curSpecInfo: any = ref({})
      const data: any = reactive({
        PopupSpecValue: false,
        specValueChecked: [],
      })

      const popupChange = async (val: boolean, item: any) => {
        if (val) {
          const { data } = await pageProductSpec({ nameCnList: props.info.nameCn })
          let arr = data.records
          if (arr && arr[0]) {
            curSpecInfo.value = arr[0]
          }
          let newList = _.cloneDeep(props.info.valueList)

          curSpecInfo.value.valueList.map((e: any) => {
            let item = newList.find((el: any) => el.valueCn == e.valueCn)
            if (item && item.checked) e.checked = true
            return e
          })
        }
      }

      const submit = () => {
        emit('save', curSpecInfo.value)
        data.PopupSpecValue = false
      }

      return {
        ...(toRefs(data) as any),
        curSpecInfo,
        popupChange,
        submit,
      }
    },
  })
</script>

<style lang="less" scoped>
  .popup-footer {
    text-align: right;
    margin-top: 5px;
  }

  .add-btn-spec-value {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    border: 1px solid #d7d7d7;
    margin-bottom: 5px;
  }
</style>
